<template>
  <el-button-group>
    <el-button :type="DateRangeType === 'today' ? 'primary' : ''" @click="set('today')">今日</el-button>
    <el-button :type="DateRangeType === 'yesterday' ? 'primary' : ''" @click="set('yesterday')">昨日</el-button>
    <el-button :type="DateRangeType === 'thisWeek' ? 'primary' : ''" @click="set('thisWeek')">本周</el-button>
    <el-button :type="DateRangeType === 'thisMonth' ? 'primary' : ''" @click="set('thisMonth')">本月</el-button>
    <el-button :type="DateRangeType === 'all' ? 'primary' : ''" @click="set('all')">不限</el-button>
  </el-button-group>
</template>

<script lang="ts" setup>
defineOptions({ name: 'DateRangeBtns' })

const props = defineProps({
  DateRangeType: {
    type: String,
    default: 'all',
    required: true
  }
})

const emit = defineEmits(['set'])
const set = (type:String )=> {
  console.log(props.DateRangeType)

  // 一天的毫秒数
  const MillisecondsADay = 24*60*60*1000
  if (type == 'today') {
    emit('set', {
      type,
      time1: new Date(new Date().toLocaleDateString()).getTime(),
      time2: new Date().getTime()
    })
  }else if(type == 'yesterday'){
    emit('set', {
      type,
      time1: new Date(new Date().toLocaleDateString()).getTime() - MillisecondsADay,
      time2: new Date().getTime() - MillisecondsADay
    })
  }else if(type == 'thisWeek'){
    const today = new Date();
    const day = today.getDay();
    const firstDayOfWeek = today.setDate(today.getDate() - day + (day === 0 ? -6 : 1));
    emit('set', {
      type,
      time1: new Date(new Date(firstDayOfWeek).toLocaleDateString()).getTime(),
      time2: new Date().getTime()
    })
  }else if(type == 'thisMonth'){
    const date = new Date()
    date.setDate(1)
    const beginTime = new Date(date.toLocaleDateString()).getTime()
    emit('set', {
      type,
      time1: beginTime,
      time2: new Date().getTime()
    })
  }else{
    emit('set', {type: 'all'})
  }
}
</script>

<style scoped lang="scss">
.card-title {
  font-size: 14px;
  font-weight: 600;

  &::before {
    position: relative;
    top: 8px;
    left: -5px;
    display: inline-block;
    width: 3px;
    height: 14px;
    //background-color: #105cfb;
    background: var(--el-color-primary);
    border-radius: 5px;
    content: '';
    transform: translateY(-50%);
  }
}
</style>
